import type React from 'react';
import { useState } from 'react';
import { TransformType } from '../../types';
import styles from './TransformControls.module.less';

interface TransformControlsProps {
  selectedTransform: TransformType;
  onTransformChange: (type: TransformType) => void;
  onTranslate: (tx: number, ty: number) => void;
  onRotate: (angle: number) => void;
  onScale: (sx: number, sy: number) => void;
  onShear: (shx: number, shy: number) => void;
  onReset: () => void;
  onUndo: () => void;
  onAddPoint: (x: number, y: number) => void;
  onAddVector: (x: number, y: number) => void;
  onClearPoints: () => void;
  onClearVectors: () => void;
  onCreateTestData: () => void;
}

export const TransformControls: React.FC<TransformControlsProps> = ({
  selectedTransform,
  onTransformChange,
  onTranslate,
  onRotate,
  onScale,
  onShear,
  onReset,
  onUndo,
  onAddPoint,
  onAddVector,
  onClearPoints,
  onClearVectors,
  onCreateTestData,
}) => {
  const [translateX, setTranslateX] = useState(0);
  const [translateY, setTranslateY] = useState(0);
  const [rotateAngle, setRotateAngle] = useState(0);
  const [scaleX, setScaleX] = useState(1);
  const [scaleY, setScaleY] = useState(1);
  const [shearX, setShearX] = useState(0);
  const [shearY, setShearY] = useState(0);

  const handleApplyTransform = () => {
    switch (selectedTransform) {
      case TransformType.TRANSLATE:
        onTranslate(translateX, translateY);
        break;
      case TransformType.ROTATE:
        onRotate(rotateAngle);
        break;
      case TransformType.SCALE:
        onScale(scaleX, scaleY);
        break;
      case TransformType.SHEAR:
        onShear(shearX, shearY);
        break;
    }
  };

  return (
    <div className={styles.controls}>
      <h3>变换控制</h3>

      <div className={styles.transformTypeSelector}>
        <h4>变换类型</h4>
        {Object.values(TransformType).map((type) => (
          <label key={type}>
            <input
              type="radio"
              name="transformType"
              value={type}
              checked={selectedTransform === type}
              onChange={() => onTransformChange(type)}
            />
            {type === TransformType.TRANSLATE && '平移'}
            {type === TransformType.ROTATE && '旋转'}
            {type === TransformType.SCALE && '缩放'}
            {type === TransformType.SHEAR && '倾斜'}
            {type === TransformType.MATRIX && '矩阵变换'}
          </label>
        ))}
      </div>

      <div className={styles.transformParameters}>
        <h4>变换参数</h4>
        {selectedTransform === TransformType.TRANSLATE && (
          <>
            <label>
              X 平移:
              <input
                type="number"
                value={translateX}
                onChange={(e) => setTranslateX(Number(e.target.value))}
              />
            </label>
            <label>
              Y 平移:
              <input
                type="number"
                value={translateY}
                onChange={(e) => setTranslateY(Number(e.target.value))}
              />
            </label>
          </>
        )}

        {selectedTransform === TransformType.ROTATE && (
          <>
            <label>
              旋转角度 (°):
              <input
                type="number"
                value={rotateAngle}
                onChange={(e) => setRotateAngle(Number(e.target.value))}
              />
            </label>
            <div className={styles.note}>
              注意：由于y轴方向已改为向上，正角度表示顺时针旋转
            </div>
          </>
        )}

        {selectedTransform === TransformType.SCALE && (
          <>
            <label>
              X 缩放:
              <input
                type="number"
                step="0.1"
                value={scaleX}
                onChange={(e) => setScaleX(Number(e.target.value))}
              />
            </label>
            <label>
              Y 缩放:
              <input
                type="number"
                step="0.1"
                value={scaleY}
                onChange={(e) => setScaleY(Number(e.target.value))}
              />
            </label>
          </>
        )}

        {selectedTransform === TransformType.SHEAR && (
          <>
            <label>
              X 倾斜:
              <input
                type="number"
                step="0.1"
                value={shearX}
                onChange={(e) => setShearX(Number(e.target.value))}
              />
            </label>
            <label>
              Y 倾斜:
              <input
                type="number"
                step="0.1"
                value={shearY}
                onChange={(e) => setShearY(Number(e.target.value))}
              />
            </label>
          </>
        )}
      </div>

      <button
        type="button"
        className={styles.applyButton}
        onClick={handleApplyTransform}
      >
        应用变换
      </button>

      <div className={styles.actionButtons}>
        <button type="button" onClick={onUndo}>
          撤销
        </button>
        <button type="button" onClick={onReset}>
          重置
        </button>
      </div>

      <div className={styles.dataControls}>
        <h4>数据管理</h4>
        <button type="button" onClick={() => onAddPoint(0, 0)}>
          添加原点
        </button>
        <button type="button" onClick={() => onAddVector(50, 0)}>
          添加X轴向量
        </button>
        <button type="button" onClick={() => onAddVector(0, -50)}>
          添加Y轴向量
        </button>
        <button type="button" onClick={onClearPoints}>
          清空点
        </button>
        <button type="button" onClick={onClearVectors}>
          清空向量
        </button>
        <button type="button" onClick={onCreateTestData}>
          创建测试数据
        </button>
      </div>
    </div>
  );
};
